/**
  * The "class" definition for the JS component properties of a 
  * graphical slider widget.
  */
function GraphicalSlider(containingDivId, selectedImagePath, unselectedImagePath) {

	var container = window.document.getElementById(containingDivId);
	var unselectedImagePath = unselectedImagePath;
	var selectedImagePath = selectedImagePath;
	
	var radioButtons = new Array();
	var images = new Array();
	
	/**
	  * the onclick method assigned to the images
	  */
	var doClick = function() {
		// update the image
		setImagesSelectState(this);
		// update the radio value
		radioButtons[this.index].checked = true;
		
		return;
	};
	
	function setImagesSelectState(element) {
		for (var i=0; i < images.length; i++) {
			if (i > element.index) {
				// turn all images with index values lte this to on
				images[i].src = unselectedImagePath;
			} else {
				// turn all images with index values gt this to off
				images[i].src = selectedImagePath;
			}
		}
	}
	
	/**
	  * pseudo constructor initializes object props
	  */
	var init = function() {
		// get the spans containing each "choice"
		var choices = container.childNodes;
		
		// populate the images and radio button arrays
		var thisRadio = "";
		var thisImage = "";
		for (var i=0; i < choices.length; i++) {
			if (choices[i].tagName == "SPAN") {
				// get the input element
				thisRadio = choices[i].getElementsByTagName('input')[0];
				thisRadio.initialValue = thisRadio.value;
				thisRadio.index = radioButtons.length;
				radioButtons.push(thisRadio);
				// get the image element
				thisImage = choices[i].getElementsByTagName('img')[0];
				thisImage.index = images.length;
				thisImage.onclick = doClick;
				images.push(thisImage);
				// determine the intitial src based on the radio value
				if (radioButtons[thisImage.index].checked == true) {
					setImagesSelectState(images[thisImage.index]);
				}
				images[thisImage.index].initialSrc = images[thisImage.index].src;
			}
		};
		
		return;
	}
	
	// initialize the object
	init();

}